<template>

  <div>

    <a-modal  width="1300px" v-model:visible="selectPackageVisible" >
      <UserComponent width="1200px" @select="selectType" ></UserComponent>
    </a-modal>

    <a-modal width="1300px" v-model:visible="selectClassVisible">
      <SampleClassComponent @select="emitClassHandler" />
    </a-modal>

    <a-modal :width="1000" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        {{ title }}
      </template>

      <a-form auto-label-width="true" labelAlign="right" :model="sampleDto">

        <a-form-item label="样片类型">
          <a-input v-model="sampleDto.sampleType" placeholder="请输入样片类型"/>
        </a-form-item>

        <a-form-item label="样片分类">
          <a-input v-model="sampleDto.sampleClassName" placeholder="请选择样片分类" :disabled="true"/>
          <a-button @click="selectClassVisible = !selectClassVisible">选择</a-button>
        </a-form-item>

<!--        <a-form-item label="适用范围">-->
<!--          <a-input v-model="sampleDto.apply" placeholder="请输入适用范围"/>-->
<!--        </a-form-item>-->

        <a-form-item label="标题">
          <a-input v-model="sampleDto.title" placeholder="请输入标题"/>
        </a-form-item>

<!--        <a-form-item label="地点">-->
<!--          <a-input v-model="sampleDto.address" placeholder="请输入地点"/>-->
<!--        </a-form-item>-->

<!--        <a-form-item label="摄影人">-->
<!--          <a-input :disabled="true" v-model="sampleDto.photographerName"/>-->
<!--          <a-button @click="selectPackageVisible = true">选择</a-button>-->
<!--        </a-form-item>-->

<!--        <a-form-item label="模特信息">-->
<!--          <a-input v-model="sampleDto.model" placeholder="请输入模特信息"/>-->
<!--        </a-form-item>-->

        <a-form-item label="样片说明">
          <a-textarea  v-model="sampleDto.description" placeholder="请输入样片说明"/>
        </a-form-item>

<!--        <a-form-item label="服装介绍">-->
<!--          <a-textarea v-model="sampleDto.clothing" placeholder="请输入服装介绍"/>-->
<!--        </a-form-item>-->

        <a-form-item label="样片图片">

          <imageUpload @imgs="img_handler" @del-img="img_handler" :src="sampleDto.image" />

        </a-form-item>

<!--        <a-form-item style="width: 200px" @click="selectImg" label="封面图片">-->

<!--          <a-image-->
<!--              height="120"-->
<!--              width="120"-->
<!--              :src="src"-->
<!--              :preview="false"-->

<!--          />-->

<!--        </a-form-item>-->

<!--        <a-form-item>-->
<!--          <a-row>-->
<!--            <a-col>-->
<!--              <a-form-item label="相机型号">-->
<!--                <a-input v-model="sampleDto.cameraModel" placeholder="请输入相机型号"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--          <a-row>-->
<!--            <a-col>-->
<!--              <a-form-item label="镜头参数">-->
<!--                <a-input v-model="sampleDto.cameraLens" placeholder="请输入镜头参数"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--          <a-row>-->
<!--            <a-col>-->
<!--              <a-form-item label="光圈">-->
<!--                <a-input v-model="sampleDto.aperture" placeholder="请输入光圈参数"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-item>-->

<!--        <a-form-item>-->
<!--          <a-row>-->
<!--            <a-col>-->
<!--              <a-form-item label="快门速度">-->
<!--                <a-input v-model="sampleDto.shutter" placeholder="请输入快门速度"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--          <a-row>-->
<!--            <a-col>-->
<!--              <a-form-item label="ISO">-->
<!--                <a-input v-model="sampleDto.cameraIso" placeholder="请输入ISO参数"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-item>-->

        <a-form-item style="width: 300px" label="状态">
          <a-select v-model="sampleDto.status" placeholder="状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-form-item>

      </a-form>

    </a-modal>
  </div>


</template>

<script setup lang="ts">

//@ts-ignore
import type {Ref} from "vue-demi";
import type {SampleDto} from "@/apis/sample";
import ImageCompressor from "image-compressor.js";
import {ref} from "vue";
import {useUserStore} from "@/stores";
import {addSample, updateSample, updateSampleImg} from "@/apis/sample";
import {Notification} from "@arco-design/web-vue";
import UserComponent from "@/views/sample/user/component/UserComponent.vue";
import SampleClassComponent from "@/views/sample/class/component/index.vue";
import imageUpload from "@/components/ImgUpload/index.vue";





let file = ref(null)

const selectPackageVisible = ref(false)

const selectClassVisible = ref(false)

/**
 * 判断图片
 * */
const via = ref(false)
const selectType = (data:any) => {
  console.log(data)
  sampleDto.value.photographer = data.id
  sampleDto.value.photographerName = data.userName

  selectPackageVisible.value = !selectPackageVisible.value
}


/**
 * 使用index中的值进行双向绑定
 * */
const visible:Ref<Boolean> = defineModel("vis", {
  type:Boolean
  ,default:false
})



const sampleDto:Ref<SampleDto> = defineModel("dto", {
  type:Object
  ,default:{
    id:0,
    sampleType:'',
    apply:'',
    frontCover:'',
    title:'',
    updateTime:'',
    address:'',
    uploader:useUserStore().userInfo.id,
    model:'',
    description:'',
    clothing:'',
    cameraModel:'',
    cameraLens:'',
    aperture:'',
    shutter:'',
    cameraIso:'',
    status:null,
    photographer:'',
    photographerName: "",
    image:[]
  }})

/**
 * 表单标题
 * */

const title:Ref<String> = defineModel("tit", {type:String,default:""})

const src:Ref<string> = defineModel("src",{
  type:String
  ,default:''
})


const api:Ref<String> = defineModel('api',{type:String,default:""})

/**
 * 确定按钮点击事件
 * */
const handleOk = () => {

  visible.value = !visible.value

  /**
   * 规范表单结构
   * */

  // if (sampleDto.value.photographer == null || sampleDto.value.photographer == '' ){
  //   Notification.warning({
  //     title: "摄影人不能为空",
  //     content: "",
  //     duration: 2000
  //   })
  //   return
  // }


  if (api.value == 'add'){

    addSample(sampleDto.value).then(res =>{

      let formData = new FormData()

      console.log(sampleDto.value.image)

      for (let i = 0; i < sampleDto.value.image!.length; i++) {

        if (sampleDto.value.image![i].file != null) {
          formData.append("img", sampleDto.value.image![i].file)
        } else {
          formData.append("imageId", sampleDto.value.image![i].ossId)
        }

      }

      console.log(formData.get("img"))

      if (formData.get("imageId") == null) {
        formData.append("imageId", "")
      }

      formData.append("img", new Blob());

      formData.append("user", useUserStore().userInfo.id)
      formData.append("sampleId", res.data.data)

      updateSampleImg(formData).then(res => {

        Notification.success({
          title: "添加成功",
          content: "添加成功",
          duration: 2000
        })
        emit('ok')
        src.value = ''
        clear()
      })

    })


  }

  if (api.value == 'up'){

    sampleDto.value.uploader = useUserStore().userInfo.id

    updateSample(sampleDto.value).then(res =>{


      const data = new FormData();

      if (sampleDto.value.image!.length <= 0) {
        Notification.error({
          title: "无法修改",
          content: "必须保留一张图片",
          duration: 2000
        })
        return;
      }

      for (let i = 0; i < sampleDto.value.image!.length; i++) {

        if (sampleDto.value.image![i].file != null) {
          data.append("img", sampleDto.value.image![i].file)
        } else {
          data.append("imageId", sampleDto.value.image![i].ossId)
        }

      }

      if (data.get("imageId") == null) {
        data.append("imageId", "")
      }

      data.append("img", new Blob());

      data.append("user", useUserStore().userInfo.id)
      data.append("sampleId", res.data.data)

      // let formData1 = new FormData;
      //
      // if (file.value != null) {
      //   formData1.append("img", file.value)
      // }
      // //紧跟添加封面
      // formData1.append("user", useUserStore().userInfo.id)
      // formData1.append("sampleId", res.data.data)

      if (via.value){
        updateSampleImg(data).then(res => {

          Notification.success({
            title: "修改成功",
            content: "修改成功",
            duration: 2000
          })
          emit('ok')
          via.value = false
          src.value = ''


        })
      }else {
        Notification.success({
          title: "修改成功",
          content: "修改成功",
          duration: 2000
        })
        emit('ok')
        via.value = false
        src.value = ''
      }


    })
  }
}

/**
 * 取消按钮
 * */
const handleCancel = () => {
  visible.value =!visible.value
  file.value = null
  clear()
}

//
const img_handler = (data:any) => {
  via.value = true
  sampleDto.value.image = data.value
}

/**
 * 选择图片方法
 * */
const selectImg =  () => {
  via.value = true
let input =  document.createElement("input")

  input.type = "file"
  input.accept = "image/gif,image/jpeg,image/jpg,image/png"
  input.click()

  input.onchange =  (e) => {

  //@ts-ignore
    file.value = e.target?.files[0]

    let fileReader = new FileReader();

    //@ts-ignore
    fileReader.readAsDataURL(e.target?.files[0])

    fileReader.onload = function (e) {
      if (e.target == null){
        return
      }
      src.value = e.target.result as string
    }

    let img = new ImageCompressor()

    if (file.value != null) {
      img.compress(file.value, {
        quality: 0.6
      }).then(res => {
        //@ts-ignore
        file.value = res
      })


    }
  }
}

/**
 * 父组件更新列表方法
 * */
const emit = defineEmits(["ok"])

/**
 * 接受样片分类数据
 */
const emitClassHandler = (data:any) => {
  selectClassVisible.value =!selectClassVisible.value
  sampleDto.value.sampleClassName = data.sampleClassName
  sampleDto.value.sampleClass = data.id
}
/**
 * 清空
 * */
const clear = ()=>{

  sampleDto.value.id = 0
  sampleDto.value.sampleType = ''
  sampleDto.value.apply = ''
  sampleDto.value.frontCover = ''
  sampleDto.value.title = ''
  sampleDto.value.updateTime = ''
  sampleDto.value.address = ''
  sampleDto.value.uploader = ''
  sampleDto.value.model = ''
  sampleDto.value.description = ''
  sampleDto.value.clothing = ''
  sampleDto.value.cameraModel = ''
  sampleDto.value.cameraLens = ''
  sampleDto.value.aperture = ''
  sampleDto.value.shutter = ''
  sampleDto.value.cameraIso = ''
  sampleDto.value.status = null
  sampleDto.value.photographer = ''
  sampleDto.value.photographerName = ''
  sampleDto.value.sampleClassName = ''
  src.value = ""
  sampleDto.value.image = []
}
</script>

<style lang="scss" scoped>

</style>